<template>
  <div class="wai">
    <div class="logo">
      <img src="../../assets/img/Register/logo.png">
    </div>
    <div class="span_inpnt">
        <div class="input">
          <div class="input_icon" @click="test"><img src="../../assets/img/Register/shouji.png"></div>
          <div class="input_text">
            <input name="number" type="number" v-model="number" placeholder="请输入手机号">
          </div>
        </div>
        <div class="input">
            <div class="input_icon"><img src="../../assets/img/Register/duanxin.png"></div>
            <div class="input_text"><input type="text" v-model="code" placeholder="请输入验证码"></div>
            <div class="input_yzm" @click="handleGetYzm">获取验证码</div>
        </div>
        <div class="input">
            <div class="input_icon"><img src="../../assets/img/Register/wode.png"></div>
            <div class="input_text"><input type="text" v-model="name" placeholder="请设置您的名称"></div>
        </div>
        <div class="input">
            <div class="input_icon"><img src="../../assets/img/Register/mima.png"></div>
            <div class="input_text"><input type="text" v-model="psd" placeholder="请设置您的密码"></div>
        </div>
        <div class="input">
            <div class="input_icon"><img src="../../assets/img/Register/wode.png"></div>
            <div class="input_text"><input disabled="disabled" type="text" v-model="superior1" placeholder="请输入推荐人ID"></div>
        </div>
    </div>
     <div class="div_btn">
       <div class="btn" @click="handleRegister">注册</div>
    </div>
  </div>



</template>

<script>
import axios from 'axios'
export default {
  name: 'Home',
  data () {
    return {
      number:'',
      code:'',
      name:'',
      psd:'',
      superior1:'',
      openId:'',
    }
  },
  mounted () {
    if(this.$route.query.openId){
      this.openId = this.$route.query.openId;
    }else{
      // window.location.href="/wechat/getopenId"
    }

    //首先存储推广人id
    if(this.$route.query.superior1){
      //把推广链接中的推广人id存在vux里
      this.$store.state.superior1 = this.$route.query.superior1
      this.superior1 = this.$route.query.superior1
      //重新执行登录
      window.location.href="/wechat/authorize"
    }

    //重新登录后给当前页面的推广人赋值
    if(this.$store.state.superior1){
      this.superior1 = this.$store.state.superior1
    }

  },
  methods: {
    test(){
      axios.post('/web/api/user/addUser',{"username":"lisi","password":"123456","phone":"1234567890","openId":"888888"}).then(this.testSucc)
    },
    testSucc(res){
      console.log(res);
    },
    handleRegister () {
      if(this.handleJiaoyan()){
        axios.post('/web/api/user/checkCode',{"code":this.code}).then(this.handleCheckCodeInfoSucc)
      }
    },
    handleJiaoyan(){
      if(this.number === ''){
        this.$Message.success("手机号不允许为空！");
        return false;
      }else if(this.openId === ''){
        this.$Message.success("请您在微信里进行注册");
        return false;
      }else if(this.code === ''){
        this.$Message.success("请输入验证码");
        return false;
      }else if(this.name === ''){
        this.$Message.success("姓名不允许为空！");
        return false;
      }else if(this.psd === ''){
        this.$Message.success("请输入密码");
        return false;
      }else{
        return true
      }
    },
    handleCheckCodeInfoSucc(res){
      var data = res.data
      console.log("data" ,data);
      if(data.code==1){
        if(this.superior1){
          axios.post('/web/api/user/selectUserInfo',{"userId":this.superior1}).then(this.handleGetUserInfoSucc)
        }else{
          axios.post('/web/api/user/addUser',{"username":this.name,"password":this.psd,"phone":this.number,"openId":this.openId}).then(this.handleRegisterInfoSucc)
        }
      }else{
         this.$Message.success("验证码不正确");
         return false;
      }
    },
    handleGetUserInfoSucc(res){
      console.log("res======",res);
      if(res.data.date){
         axios.post('/web/api/user/addUser',{"username":this.name,"password":this.psd,"phone":this.number,"superior1":this.superior1,"openId":this.openId}).then(this.handleRegisterInfoSucc)
      }else{
        this.$Message.success("您输入的推荐人ID不存在");
      }
    },
    handleRegisterInfoSucc(res){
      this.$Message.success("注册成功！");
       this.$router.push({path: '/Login'});
    },
    handleGetYzm () {
      if(!(/^1[34578]\d{9}$/.test(this.number))){
        alert("手机号码不正确");
        return false;
      }
      axios.post('/web/api/user/verifyPhone',{"phone":this.number}).then(this.verifyPhoneSucc)


    },
    verifyPhoneSucc(res){
      console.log(res);
      if(res.data.code==0){
        axios.post('/web/api/user/sendSMS',{"phone":this.number}).then(this.handleGetYzmInfoSucc)
      }else{
        alert("手机号已存在");
      }
    },
    handleGetYzmInfoSucc (res) {
      console.log(res)
      if(res.data.code==1){
         this.$Message.success("验证码已经发送");
      }else{
        this.$Message.success("手机号码不正确");
      }

    }
  }
}
</script>
<style lang="stylus" scoped>
  .wai
    width 100%
    background #3b83c5 url(../../assets/img/Register/bg.png) no-repeat 100% 100%
    .logo
      width 100%
      height 20rem
      text-align center
      img
        width 90%
        height 10rem
        margin 5rem auto
    .span_inpnt
      width 95%
      margin-left 2.5%
      height 28rem
      background #64a0ec
      text-align center
      padding-top 0.1rem
      border-radius 2rem
      .input
        margin-left 5%
        margin-top 1rem
        height 4rem
        width 90%
        text-align center
        background #fff
        border-radius 0.2rem
        .input_icon
          margin-left 5%
          margin-top 1rem
          float left
          img
            width 2rem
            height 2rem
        .input_text
          margin-left 2rem
          margin-top 0.5rem
          float left
          width 4rem
          height 3rem
          input
            width 10rem
            height 3rem
            border none
        .input_yzm
          width 100%
          height 4rem
          line-height 4rem
    .div_btn
      width 100%
      height 20rem
      text-align 2.8rem
      .btn
        margin-top 2rem
        margin-left 10%
        width 80%
        height 2.8rem
        background #3b83c5 url(../../assets/img/Register/login_btn.png) no-repeat 100% 100%
        text-align center
        line-height 2.8rem
        color #ffffff
        border-radius 2rem


</style>

